<template>
	<view class="text-result">
		<view class="res-header">
			<view class="tel-adver">
				<view class="tel-t">
					<view>放心问</view>
					<view>专业安全</view>
				</view>
				<view class="tel-b">
					<view>
						<image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/expert-icon-1.png"></image>专家实时在线
					</view>
					<view>
						<image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/expert-icon-2.png"></image>闪电回复
					</view>
					<view>
						<image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/expert-icon-3.png"></image>30分钟内解决问题
					</view>
				</view>
			</view>
		</view>
		<view class="text-name">
			<view class="">
				<image class="expert-item-pic" :src="headPortrait" mode=""></image>
			</view>
			<view class="text-name-l">
				<view class="text-name-t">{{name}}【图文咨询】</view>
				<view class="text-name-p">
					¥ {{picTxtItems[0].price}} 元/次
				</view>
			</view>

		</view>
		<view class="line">

		</view>
		<view class="res-header">
			<view class="text-list">

				<view class="discount">
					<view class="discount-l">优惠券</view>
					<view class="discount-r">无可用优惠券<uni-icons size="16" color="#C5C4C4" type="arrowright"></uni-icons>
					</view>
				</view>
				<view class="act-warp">
					<view class="act-item">支付方式</view>
				</view>
				<view class="ord-pay-type">
					<view class="ord-pay-type-left">
						<image style="width: 40upx;height: 32upx;vertical-align: middle;margin-right: 16upx;" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/weixin.png"
						 mode=""></image>
						<text class="ord-wechat-font">微信支付</text>
					</view>
					<view class="ord-pay-type-right">
						<image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/ord-choose.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="line">

		</view>
		<view class="tel-tips">
			<view class="tel-tips-title ">
				<!-- <image class="warpTips" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/expert-light.png"></image> -->
				<span class="tips">提示:</span>
			</view>
			<view class="tel-tips-title1 tel-tips-font">
				1. {{programName}}平台确保您的隐私安全,请放心提交。
			</view>
			<view class="tel-tips-title1 tel-tips-font">
				2. 一次咨询的时效为48小时,在48小时内随时和咨询专家(专家对话上限为30次)。
			</view>
			<view class="tel-tips-title1 tel-tips-font">
				3. 专家未回复可随时退款。
			</view>
		</view>
		<view class="order-pay-bottom" @click="confirm">
			<view class="order-pay-bottom-btn">
				去支付
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		programName
	} from '@/common/config'
	import { permissionJudge } from "@/utils/authority.js" //权限信息校验
	export default {
		data() {
			return {
				mainId: '',
				note: '',
				name: '',
				bottomPadding: '12rpx',
				orderInfo: '',
				headPortrait: '',
				linkUserId:'',
				picTxtItems:[{price:0}],
				programName: programName
			};
		},
		computed: {
			...mapState('userStore', ['hasLogin']),
		},
		onLoad(option) {
			if(!this.hasLogin){
				uni.navigateTo({
					url:'../login/login'
				})
			}
			this.getExpert(option.scene)	
			let that = this;

			uni.getSystemInfo({
				success: function(res) {
					console.log(res.model);
					if (res.model.indexOf('iPhone X') != -1 || res.model.indexOf('iPhone 11') != -1) { //XS,XR,XS MAX均可以适配,因为indexOf()会将包含'iPhone X'的字段都查出来
						that.bottomPadding = '78rpx'
					} else {
						that.bottomPadding = '12rpx'
					}
				}
			});
		},
		methods: {
			getExpert(v) {
				this.$request.get({
					url: 'ExpertInfo/selectExperById',
					data: {
						expertId:v
					},
				}).then(res=>{
					
					this.mainId = res.expertId;
					this.name = res.userInfo.realName;
					this.headPortrait = res.headPortrait;
					this.linkUserId = res.linkUserId;
					this.getPrice()
				})
			},
			getPrice() {
				this.$request.get({
					url: 'mallInfo/selectExpert',
					data: {
						"id": this.linkUserId
					},
				}).then(res=>{
					this.picTxtItems = res.filter(item => parseInt(item.typeId) === 2);
					
				})
			},

			confirm() {
				if(!permissionJudge('pay:order:save')){
					uni.showToast({
						title:'暂无权限',
						icon:'none'
					})
					return false
				}
				const _self = this;
				this.$request.post({
					url: 'mallInfo/editExpert',
					data: [{
						price: this.picTxtItems[0].price,
						typeId: 2,
						mainId: this.linkUserId,
					}],
				}).then(res => {
					const expertProductItem = res[0];
					const {
						mallId,
						typeId
					} = expertProductItem;
					this.$request.post({
						url: 'expertOrder/add',
						data: {
							price: this.picTxtItems[0].price,
							note: this.note,
							specs: typeId,
							mallId,
						}
					}).then(res => {
						//预约 主键
						this.subscribeId = res;
						const openId = uni.getStorageSync('openid');
						this.$request.post({
							url: 'payOrder/addOrder',
							data: {
								mallNum: 1,
								payType: '21',
								userInfoId: this.mainId,
								mallId,
								remarks: 2,
								openId
							}
						}).then(res => {
							// 更新订单
							_self.updateOrder(res);
							_self.orderInfo = res;

						})
					})
				})
			},
			updateOrder(res) {
				const _self = this;
				const params = {
					id: this.subscribeId,
					orderCode: res.orderCode,
					orderId: res.orderId
				}
				console.log('params', params);
				console.log('res', res);
				this.$request.post({
					url: 'expertOrder/updateOrder',
					data: params
				}).then(res => {
					_self.pay(res);
				})
			},
			/**
			 * @description 吊起微信支付
			 * @param {Object} orderInfo {订单信息}
			 */
			pay() {
				let orderInfo = this.orderInfo;
				const {
					payMap
				} = orderInfo;
				let _self = this;
				console.log("===text-result=====" +
					`/pagesA/chat-contactlist/fee-chat?userId=${_self.linkUserId}&expertId=${_self.mainId}&type=0&finished='true'`);

				if (!payMap) {
					uni.navigateTo({
						url: `/pagesA/chat-contactlist/fee-chat?userId=${_self.linkUserId}&expertId=${_self.mainId}&type=0&finished='true'`
					})
				}
				const {
					nonceStr,
					sign,
					signType,
					timeStamp
				} = payMap;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: timeStamp,
					nonceStr: nonceStr,
					package: payMap.package,
					signType: signType,
					paySign: sign,
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
						// uni.navigateTo({
						// 	url:"/pages/act-result/act-result"
						// });
						uni.navigateTo({
							url: `/pagesA/chat-contactlist/fee-chat?userId=${_self.linkUserId}&expertId=${_self.mainId}&type=0&finished='true'`
						})
					},
					fail: function(err) {
						uni.redirectTo({
							url: "/pagesB/my-order/my-order"
						});
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.ord-pay-bot {
		// height: 108upx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 12upx 40upx;
		border-top: 1rpx solid #F2F2F2;
		box-shadow: 0px -3px 3px 0px rgba(0, 0, 0, 0.02);
	}

	.ord-pay-bot-left {
		display: flex;
		align-items: center;
	}

	.ord-pay-bot-left-pay {
		width: 142upx;
		font-size: 26upx;
		font-family: ArialMT;
		color: rgba(222, 90, 2, 1);
	}

	.ord-pay-bot-left-coupon {
		font-size: 22upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(34, 34, 34, 1);
	}


	.ord-pay-bot-opt {
		width: 270upx;
		height: 80upx;
		background: rgba(0, 139, 255, 1);
		border-radius: 6upx;
		text-align: center;
		line-height: 80upx;
		font-size: 32upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}

	.line {
		width: 100%;
		height: 20upx;
		background-color: #F5F5F5;
	}

	.tel-adver {
		width: 686upx;
		height: 126upx;
		background: rgba(250, 250, 250, 1);
		// border-radius: 24upx;
		box-sizing: border-box;
		margin: 20upx auto 0;
		padding: 28upx;

		.tel-t {
			display: flex;
			margin-bottom: 20upx;

			>view:nth-child(1) {
				font-size: 28upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: rgba(178, 137, 58, 1);
				line-height: 28upx;
				margin-right: 30upx;
				position: relative;

				&::after {
					content: '';
					display: block;
					width: 2upx;
					height: 24upx;
					background: rgba(222, 206, 174, 1);
					position: absolute;
					right: -16upx;
					top: 50%;
					transform: translateY(-60%);
				}
			}

			>view:nth-child(2) {
				font-size: 28upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: rgba(178, 137, 58, 1);
				line-height: 28upx;
			}
		}

		.tel-b {
			display: flex;

			view {
				font-size: 22upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(179, 140, 63, 1);
				line-height: 22upx;
				margin-right: 34upx;
			}

			view:nth-child(1) {
				image {
					width: 26upx;
					height: 22upx;
					vertical-align: middle;
					display: inline-block;
					margin-bottom: 6upx;
					margin-right: 4upx;
				}
			}

			view:nth-child(2) {
				image {
					width: 14upx;
					height: 22upx;
					vertical-align: middle;
					display: inline-block;
					margin-bottom: 6upx;
					margin-right: 4upx;
				}
			}

			view:nth-child(3) {
				image {
					width: 20upx;
					height: 20upx;
					vertical-align: middle;
					display: inline-block;
					margin-bottom: 6upx;
					margin-right: 4upx;
				}
			}
		}
	}

	.tel-tips-font {
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #757575;
		line-height: 50upx;
	}

	.tips {
		font-size: 30upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: rgba(68, 68, 68, 1);
	}

	.warpTips {
		width: 32upx;
		height: 40upx;
		margin-right: 10upx;
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 18upx;
	}

	.tel-tips-title {
		margin-bottom: 14upx;
	}

	.tel-tips {
		padding: 48upx 38upx 80upx 38upx;
		// margin-bottom: 110upx;
		background-color: #F5F5F5;
	}

	.tel-tips-font {
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #757575;
		line-height: 50upx;
	}

	.ord-pay-type {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 116upx;
		line-height: 116upx;
		background-color: #FFFFFF;
	}

	.ord-line {
		width: 100%;
		height: 20upx;
		background-color: #F5F5F5;
	}

	.ord-pay-type-left {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.ord-wechat-font {
		// font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.ord-pay-type-right {
		image {
			width: 38upx;
			height: 38upx;
		}
	}

	.act-warp {
		box-sizing: border-box;
		background-color: #FFFFFF;

		.act-item {
			height: 114upx;
			line-height: 114upx;
			display: flex;
			border-bottom: 2upx solid #F9F9F9;

			.act-item-left {
				height: 114upx;
				line-height: 114upx;
				text-align: left;
				flex: 1;
				font-size: 30upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(68, 68, 68, 1);
			}

			.act-item-right {
				height: 114upx;
				line-height: 114upx;
				text-align: right;
				flex: 1;
				font-size: 28upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(163, 163, 163, 1);
			}
		}
	}

	.text-result {
		.res-header {
			box-sizing: border-box;
			padding: 0 32upx;

			.order-notice {
				width: 686upx;
				height: 126upx;

				image {
					width: 686upx;
					height: 126upx;
				}
			}



			.text-list {


				.discount {
					display: flex;
					justify-content: space-between;
					border-bottom: 2upx solid #F9F9F9;

					.discount-l {
						font-size: 30upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(68, 68, 68, 1);
						line-height: 114upx;
					}

					.discount-r {
						font-size: 28upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(163, 163, 163, 1);
						line-height: 114upx;
					}
				}

				.pay-method {
					border-bottom: 2upx solid #F9F9F9;

					view {
						font-size: 30upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(68, 68, 68, 1);
						line-height: 114upx;
					}
				}

				.pay-name {
					display: flex;
					justify-content: space-between;
					border-bottom: 2upx solid #F9F9F9;

					.pay-name-l {
						font-size: 30upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(68, 68, 68, 1);
						line-height: 114upx;
					}
				}
			}
		}
	}

	.text-name {
		display: flex;
		// height: 138upx;
		margin: 40upx 0;
		padding: 0 32upx;

		image {
			width: 135upx;
			height: 135upx;
			border-radius: 135upx;
			margin-right: 27upx;
		}

		.text-name-l {
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.text-name-t {
				color: #222222;
				font-size: 30upx;
				font-weight: 600;
			}

			.text-name-p {
				color: #DE5A02;
				font-size: 26upx;
			}
		}

		.text-name-r {
			font-size: 30upx;
			font-weight: 600;
			color: rgba(222, 90, 2, 1);
			line-height: 138upx;
		}

	}

	.order-pay-bottom {
		background-color: #F5F5F5;
		padding-bottom: 40upx;

		.order-pay-bottom-btn {
			width: 637upx;
			height: 88upx;
			margin: 0 auto;
			background: rgba(25, 109, 236, 1);
			border-radius: 44upx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			font-size: 30upx;
		}
	}
</style>
